<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
	<div class="goods" id="goodsBeiFen" name="goodsBeiFen">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{ search }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->
		<template>
			<div>
				<!-- 分类标签 -->
				<div>
					<div class="header">
						<div class="site-header">
							<div class="container">
								<div class="header-nav">
									<ul class="nav-list J_navMainList clearfix">
										<el-tabs v-model="activeName" type="card">
											<el-tab-pane
												v-for="item in categoryList"
												:key="item.id"
												:label="item.name"
												:name="''+item.id"
											/>
										</el-tabs>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div><!-- 分类标签END -->
			</div>
		</template>
		<!-- 主要内容区 -->
		<div class="main">
			<!--			<MyFenLei></MyFenLei>-->
			<div class="list">
				<MyList :list="product" v-if="product.length>0"></MyList>
				<div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					@current-change="currentChange"
				></el-pagination>
			</div>
			<!-- 分页END -->
		</div>
		<!-- 主要内容区END -->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				categoryList: "", //分类列表
				categoryID: [], // 分类id
				product: "", // 商品列表
				productList: "",
				total: 0, // 商品总量
				pageSize: 15, // 每页显示的商品数量
				currentPage: 1, //当前页码
				activeName: "-1", // 分类列表当前选中的id
				search: "", // 搜索条件
				menuDataTest: "",
				menuTimer: null, // 定时器
				activeSubmenu: null, // 当前要展示的菜单
				showSubMenu: false, // 控制二级菜单显示隐藏值
				active: false,
				category3List: "",
			};
		},
		created() {
			// 获取分类列表
			this.getCategory();
			this.getCategory13();
			
		},
		activated() {
			this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
			this.total = 0; // 初始化商品总量为0
			this.currentPage = 1; //初始化当前页码为1
			// 如果路由没有传递参数，默认为显示全部商品
			if (Object.keys(this.$route.query).length == 0) {
				this.categoryID = [];
				this.activeName = "0";
				return;
			}
			// 如果路由传递了categoryID，则显示对应的分类商品
			if (this.$route.query.categoryID != undefined) {
				this.categoryID = this.$route.query.categoryID;
				if (this.categoryID.length == 1) {
					this.activeName = "" + this.categoryID[0];
				}
				return;
			}
			// 如果路由传递了search，则为搜索，显示对应的分类商品
			if (this.$route.query.search != undefined) {
				this.search = this.$route.query.search;
			}
		},
		watch: {
			// 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
			activeName: function (val) {
				if (val == 0) {
					this.categoryID = [];
				}
				if (val > 0) {
					this.categoryID = [Number(val)];
				}
				// 初始化商品总量和当前页码
				this.total = 0;
				this.currentPage = 1;
				// 更新地址栏链接，方便刷新页面可以回到原来的页面
				this.$router.push({
					path: "/goodsBeiFen",
					query: {category3Id: this.categoryID}
				});
			},
			// 监听搜索条件，响应相应的商品
			search: function (val) {
				if (val != "") {
					this.getProductBySearch(val);
				}
			},
			// 监听分类id，响应相应的商品
			categoryID: function () {
				this.getData();
				this.search = "";
			},
			// 监听路由变化，更新路由传递了搜索条件
			$route: function (val) {
				if (val.path == "/goodsBeiFen") {
					if (val.query.search != undefined) {
						this.activeName = "-1";
						this.currentPage = 1;
						this.total = 0;
						this.search = val.query.search;
					}
				}
			}
		},
		methods: {
			// 返回顶部
			backtop() {
				const timer = setInterval(function () {
					const top = document.documentElement.scrollTop || document.body.scrollTop;
					const speed = Math.floor(-top / 5);
					document.documentElement.scrollTop = document.body.scrollTop =
						top + speed;
					
					if (top === 0) {
						clearInterval(timer);
					}
				}, 20);
			},
			// 页码变化调用currentChange方法
			currentChange(currentPage) {
				this.currentPage = currentPage;
				if (this.search != "") {
					this.getProductBySearch();
				} else {
					this.getData();
				}
				this.backtop();
			},
			getCategory13() {
				this.$axios
					.get("/product/category/selectAllCategory13", {})
					.then(res => {
						if (res.data.code === 0) {
							this.menuDataTest = res.data.data;
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求分类列表数据
			getCategory() {
				this.$axios
					.get("/product/category/selectAllCategory3", {})
					.then(res => {
						const val = {
							id: 0,
							name: "全部"
						};
						const cate = res.data.data;
						cate.unshift(val);
						this.categoryList = cate;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求全部商品或分类商品数据
			getData() {
				// 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
				const api = '/product/list'
				this.$axios
					.get(api, {
						params: {
							category3Id: this.categoryID[0],
							page: this.currentPage,
							limit: this.pageSize
						}
					})
					.then(res => {
						this.product = res.data.data.records;
						this.total = res.data.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 通过搜索条件向后端请求商品数据
			getProductBySearch() {
				this.$axios
					.get('/product/list', {
						params: {
							name: this.search,
							page: this.currentPage,
							limit: this.pageSize
						}
					})
					.then(res => {
						this.product = res.data.data.records;
						this.total = res.data.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
		},
	}
</script>

<style scoped>
	.el-button + .el-button {
		margin-left: 8px;
	}
	
	.goods {
		background-color: #f5f5f5;
	}
	
	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}
	
	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}
	
	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}
	
	/* 面包屑CSS END */
	
	/* 分类标签CSS */
	.site-header .nav-category {
		position: relative;
		float: left;
		width: 127px;
		padding-right: 15px
	}
	
	.site-header .header-nav {
		float: left;
		width: 850px
	}
	
	.goods .nav {
		background-color: white;
	}
	
	.site-header .nav-list {
		position: relative;
		z-index: 10;
		float: left;
		width: 1100px;
		height: 88px;
		margin: 0;
		padding: 12px 0 0 30px;
		list-style-type: none;
		font-size: 16px
	}
	
	.link-category {
		display: block;
		padding: 26px 0 38px;
		text-align: right;
		color: #333;
	}
	
	.site-category {
		display: none;
		position: absolute;
		top: 88px;
		left: -22px;
		z-index: 21;
		width: 234px;
		height: 460px;
		font-size: 14px;
	}
	
	.goods .nav .product-nav {
		width: 1225px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
	}
	
	.nav .product-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}
	
	.site-category-list {
		height: 418px;
		margin: 0;
		padding: 20px 0;
		list-style-type: none;
		border: 1px solid #ff6700;
		color: #424242;
		background: #fff
	}
	
	.iconfont-arrow-right-big:before {
		content: "\E623"
	}
	
	.iconfont-arrow-right-big-thin:before {
		content: "\E622"
	}
	
	.site-category-list .category-item-active .title {
		background: #ff6700;
		color: #fff
	}
	
	.site-category-list .category-item-active .title em[class*=iconfont] {
		color: #fff;
		color: hsla(0, 0%, 100%, .5)
	}
	
	.site-category-list .category-item-active .children {
		display: block
	}
	
	.site-category-list .title {
		position: relative;
		display: block;
		padding-left: 30px;
		height: 42px;
		line-height: 42px;
		color: #424242
	}
	
	.site-category-list .title em[class*=iconfont] {
		position: absolute;
		top: 12px;
		right: 20px;
		font-size: 16px;
		line-height: 16px;
		color: #e0e0e0
	}
	
	.site-category-list.site-category-list-custom {
		height: 420px;
		border: 0;
		color: #fff;
		background: rgba(105, 101, 101, .6)
	}
	
	.site-category-list.site-category-list-custom .title {
		color: #fff
	}
	
	.site-category-list.site-category-list-custom .title i {
		color: hsla(0, 0%, 100%, .5)
	}
	
	.site-category-list .children-list {
		height: 458px;
		margin: 0;
		padding: 2px 0;
		list-style-type: none
	}
	
	.site-category-list .children-list li {
		position: relative;
		float: left;
		width: 265px;
		height: 76px
	}
	
	.site-category-list .children-list li.star-goods .link {
		width: 170px;
		padding-right: 0
	}
	
	.site-category-list .children-list .link {
		display: block;
		padding: 18px 20px;
		line-height: 40px;
		color: #333;
		-webkit-transition: color .2s;
		transition: color .2s
	}
	
	.site-category-list .children-list .link:hover {
		color: #ff6700
	}
	
	.site-category-list .children-list .thumb {
		float: left;
		margin-right: 12px;
		vertical-align: middle
	}
	
	.site-category-list .children-list .text {
		float: left;
		width: 172px;
		line-height: 40px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden
	}
	
	.site-category-list .children-list .btn-buy {
		position: absolute;
		right: 10px;
		top: 26px;
		width: 58px;
		height: 22px;
		line-height: 22px
	}
	
	.site-category-list .children-list-col {
		float: left;
		width: 265px
	}
	
	.record_content {
		height: 80%;
		/*设定y轴有srcoll效果*/
		overflow-y: scroll;
	}
	
	/* 自定义滚动条样式开始 */
	::-webkit-scrollbar {
		width: 5px; /*滚动条宽度*/
		height: 18px; /*滚动条高度*/
	}
	
	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		box-shadow: 0px 1px 3px #D2EBE9 inset; /*滚动条的背景区域的内阴影*/
		border-radius: 10px; /*滚动条的背景区域的圆角*/
		background-color: #D2EBE9; /*滚动条的背景颜色*/
	}
	
	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		box-shadow: 0px 1px 3px #ED8240 inset; /*滚动条的内阴影*/
		border-radius: 10px; /*滚动条的圆角*/
		background-color: #ED8240; /*滚动条的背景颜色*/
	}
	
	.site-category-list .children {
		display: none;
		position: absolute;
		left: 234px;
		top: 0;
		z-index: 24;
		height: 458px;
		border: 1px solid #e0e0e0;
		border-left: 0;
		background: #fff;
		-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
		box-shadow: 0 8px 16px rgba(0, 0, 0, .18)
	}
	
	.site-category-list .children-col-1 {
		width: 265px
	}
	
	.site-category-list .children-col-2 {
		width: 530px
	}
	
	.site-category-list .children-col-3 {
		width: 795px
	}
	
	.site-category-list .children-col-4 {
		width: 992px
	}
	
	.site-category-list .children-col-4 .children-list-col {
		width: 248px
	}
	
	/* 分类标签CSS END */
	
	/*轮播图*/
	.home-hero-container {
		position: relative;
		z-index: 10
	}
	
	.home-hero {
		position: relative;
		margin-bottom: 26px
	}
	
	.home-hero .home-hero-sub {
		margin-top: 14px
	}
	
	.home-hero-swiper {
		position: relative;
		height: 460px;
		overflow: hidden
	}
	
	.swiper-container {
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		list-style: none;
		padding: 0;
		z-index: 1
	}
	
	.swiper-container-no-flexbox .swiper-slide {
		float: left
	}
	
	.swiper-container-vertical > .swiper-wrapper {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}
	
	.swiper-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		-webkit-box-sizing: content-box;
		box-sizing: content-box
	}
	
	.swiper-container-android .swiper-slide, .swiper-wrapper {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
	
	.swiper-container-multirow > .swiper-wrapper {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
	.swiper-container-free-mode > .swiper-wrapper {
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
		margin: 0 auto
	}
	
	.swiper-slide {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 100%;
		height: 100%;
		position: relative;
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform
	}
	
	.swiper-slide-invisible-blank {
		visibility: hidden
	}
	
	.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
		height: auto
	}
	
	.swiper-container-autoheight .swiper-wrapper {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-transition-property: height, -webkit-transform;
		transition-property: height, -webkit-transform;
		transition-property: transform, height;
		transition-property: transform, height, -webkit-transform
	}
	
	.swiper-container-3d {
		-webkit-perspective: 1200px;
		perspective: 1200px
	}
	
	.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d
	}
	
	.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 10
	}
	
	.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
		-ms-touch-action: pan-y;
		touch-action: pan-y
	}
	
	.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
		-ms-touch-action: pan-x;
		touch-action: pan-x
	}
	
	.swiper-button-next, .swiper-button-prev {
		position: absolute;
		top: 50%;
		width: 41px;
		height: 69px;
		margin-top: -35px;
		z-index: 10;
		cursor: pointer;
		outline: none
	}
	
	.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
		opacity: .5
	}
	
	.home-hero-swiper .swiper-slide {
		width: 1226px;
		height: 460px;
		text-align: right
	}
	
	.home-hero-swiper .swiper-slide a {
		display: block;
		background: url(//i1.mifile.cn/f/i/2014/cn/placeholder-220.png) no-repeat 620px
	}
	
	.home-hero-swiper .swiper-slide img {
		display: block;
		width: 1226px;
		height: 460px
	}
	
	.home-hero-swiper .swiper-button-prev {
		left: 234px
	}
	
	.container {
		width: 1226px;
		margin-right: auto;
		margin-left: auto
	}
	
	.container:after, .container:before {
		content: " ";
		display: table
	}
	
	.container:after {
		clear: both
	}
	
	.home-hero-swiper .swiper-pagination {
		width: 400px;
		left: auto;
		right: 30px;
		bottom: 20px;
		text-align: right
	}
	
	.home-hero-swiper .swiper-pagination {
		width: 400px;
		left: auto;
		right: 30px;
		bottom: 20px;
		text-align: right
	}
	
	.home-hero-swiper .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
		border: 2px solid #fff;
		border-color: hsla(0, 0%, 100%, .3);
		border-radius: 10px;
		overflow: hidden;
		background: rgba(0, 0, 0, .4);
		opacity: 1
	}
	
	.home-hero-swiper .swiper-pagination-bullet:focus {
		outline: 0
	}
	
	.home-hero-swiper .swiper-pagination-bullet-active, .home-hero-swiper .swiper-pagination-bullet:hover {
		background: hsla(0, 0%, 100%, .4);
		border-color: rgba(0, 0, 0, .4)
	}
	
	.home-hero-swiper .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
		border: 2px solid #fff;
		border-color: hsla(0, 0%, 100%, .3);
		border-radius: 10px;
		overflow: hidden;
		background: rgba(0, 0, 0, .4);
		opacity: 1
	}
	
	.home-hero-swiper .swiper-pagination-bullet:focus {
		outline: 0
	}
	
	.home-hero-swiper .swiper-pagination-bullet-active, .home-hero-swiper .swiper-pagination-bullet:hover {
		background: hsla(0, 0%, 100%, .4);
		border-color: rgba(0, 0, 0, .4)
	}
	
	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}
	
	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}
	
	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}
	
	.goods .main .none-product {
		color: #333;
		margin-left: 13.7px;
	}
	
	/* 主要内容区CSS END */
</style>
